<template>
  <header class="header">
    <h1>待办列表</h1>
    <span v-if="listLength === 0">如果没有任务我就显示</span>
    <input
      v-model="inputValue"
      @keyup.enter="handleAddTodo"
      placeholder="请输入任务"
      class="new-todo"
    />
    <button @click="handleAddTodo" class="add">添加任务</button>
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TodoItem } from './types'

interface Props {
  listLength: number
}

interface Emits {
  (e: 'add-todo', todo: TodoItem): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const inputValue = ref<string>('')

const handleAddTodo = () => {
  const task = inputValue.value.trim()
  if (!task) return

  emit('add-todo', {
    id: Date.now(),
    name: task
  })
  inputValue.value = ''
}
</script>